<template>
    <div class="home">
        <el-table :data="domains" style="width: 100%;" border size="small" :row-class-name="tableRowClassName">
            <el-table-column prop="id" label="id" width="80" />
            <el-table-column prop="domain" label="域名" width="180px" />
            <el-table-column prop="domain_health" label="域名状态" width="100px" />
            <el-table-column prop="createtime" label="时间" width="180" />
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex'
import { onMounted, computed } from 'vue'

const store = useStore()

const domains = computed(() => store.state.domains)

const getDomainsAsync = async () => {
    await store.dispatch('getAllDomains')
}

onMounted(() => {
    getDomainsAsync()
})

// 设置行样式类名
const tableRowClassName = ({ row }) => {
    if (row.domain_health === '台湾屏蔽') {
        return 'warning-row'
    }
    return ''
}
</script>

<style scoped>
.warning-row {
    background-color: #ffcccc !important;
}
</style>